<template>
	<HeaderNav active-index="2"></HeaderNav>
	<TaskContainer>
		<div class="task-extra-cards">
			<el-card v-for="(task, index) in tasks" :key="index" class="task-card" shadow="hover">
				<div class="task-header">
					<h3 class="task-title" @click="handlePreviewTask(task)" style="cursor:pointer;">{{ task.detail }}</h3>
					<el-button type="primary" size="small" class="reset-button" @click="handler(task.id)">重置任务</el-button>
				</div>
				<div class="task-details">
					<el-descriptions :column="3" border>
						<el-descriptions-item label="难易程度">{{ task.completed }}</el-descriptions-item>
						<el-descriptions-item label="阶段名称">{{ task.l_name }}</el-descriptions-item>
						<el-descriptions-item label="模块名称">{{ task.m_name }}</el-descriptions-item>
						<el-descriptions-item label="学生名单">
							<el-tag v-for="(student, index) in task.students" :key="index" :style="{ backgroundColor: student.color, color: getTextColor(student.color) }">
								{{ student.name }}
							</el-tag>
						</el-descriptions-item>
					</el-descriptions>
				</div>
			</el-card>
		</div>
		
		<!-- 空数据状态 -->
		<div v-if="tasks.length === 0" class="no-data">
			<el-empty description="暂无需要精讲的任务"></el-empty>
		</div>

		<el-dialog v-model="showPreviewDialog" title="任务预览" width="60%">
			<div v-if="showPreviewDialog && currentPreviewTask">
				<div><b>任务名：</b>{{ currentPreviewTask.detail }}</div>
				<div style="margin:8px 0;"><b>任务详细：</b>{{ currentPreviewTask.title }}</div>
			</div>
		</el-dialog>
	</TaskContainer>
	<Footor></Footor>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import Footor from '@/components/Footor.vue'
import API from '@/api/index.js'

export default {
	components: {
		HeaderNav,
		TaskContainer,
		Footor,
	},
	data() {
		return {
			tasks: [],
			showPreviewDialog: false,
			currentPreviewTask: null,
		}
	},
	created() {
		this.getTaskExtra()
	},
	methods: {
		getRandomColor() {
			const letters = '0123456789ABCDEF';
			let color = '#';
			for (let i = 0; i < 6; i++) {
				color += letters[Math.floor(Math.random() * 16)];
			}
			return color;
		},
		getTextColor(bgColor) {
			const color = bgColor.substring(1); // remove #
			const rgb = parseInt(color, 16); // convert rrggbb to decimal
			const r = (rgb >> 16) & 0xff; // extract red
			const g = (rgb >> 8) & 0xff; // extract green
			const b = (rgb >> 0) & 0xff; // extract blue
			const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
			return luma < 140 ? '#FFFFFF' : '#000000'; // return white or black
		},
		handler(taskId) {
			// console.log('准备重置任务，任务ID:', taskId);
			this.$layer.confirm("您确定要重置该任务吗", index => {
				// console.log('用户确认重置任务，开始调用API');
				// 调用重置任务API
				API.updatestate(taskId).then(res => {
					this.$message.success('任务已重置');
					this.getTaskExtra(); // 重新获取任务列表
					this.$layer.close(index);
				}).catch(error => {
					// console.error('重置任务失败:', error);
					// 显示更详细的错误信息
					if (error.response) {
						// console.error('错误响应数据:', error.response.data);
						// console.error('错误状态码:', error.response.status);
					}
					this.$message.error('重置任务失败');
					this.$layer.close(index);
				});
			});
		},
		// 获取需讲解的任务
		getTaskExtra() {
			API.getTaskExtraList().then(res => {
				// 检查返回数据的结构
				// console.log('API返回数据:', res)
				
				// 处理返回的数据
				if (res && res.data) {
					// 为每个任务的学生添加随机颜色
					this.tasks = res.data.map(task => {
						// 确保students字段存在
						if (task.students && Array.isArray(task.students)) {
							task.students = task.students.map(student => ({
								...student,
								color: this.getRandomColor()
							}))
						} else if (task.users && Array.isArray(task.users)) {
							// 如果是users字段，转换为students格式
							task.students = task.users.map(user => ({
								name: user.u_name || user.username || '未知学生',
								color: this.getRandomColor()
							}))
						}
						return task
					})
				} else {
					this.tasks = []
					// console.warn('API返回数据格式不正确:', res)
				}
				
				// console.log('处理后的任务数据:', this.tasks)
			}).catch(error => {
				console.error('获取任务精讲列表失败:', error)
				this.$message.error('获取任务精讲列表失败')
			})
		},
		handlePreviewTask(task) {
			this.currentPreviewTask = task;
			this.showPreviewDialog = true;
		},
	}
}
</script>

<style scoped>
.task-extra-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
	padding: 0 50px;
	justify-content: flex-start; /* 确保卡片从左侧开始排列 */
}

.task-card {
	flex: 0 0 calc(33.333% - 14px); /* 固定宽度，一行三个卡片，考虑间距 */
	max-width: calc(33.333% - 14px); /* 确保最大宽度也受限制 */
	min-width: 300px; /* 设置最小宽度，防止卡片太小 */
	box-sizing: border-box;
	transition: transform 0.3s, box-shadow 0.3s;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px; /* 添加底部间距 */
}

/* 确保在小屏幕上卡片能够自适应 */
@media (max-width: 1200px) {
	.task-card {
		flex: 0 0 calc(50% - 10px); /* 中等屏幕一行两个 */
		max-width: calc(50% - 10px);
	}
}

@media (max-width: 768px) {
	.task-card {
		flex: 0 0 100%; /* 小屏幕一行一个 */
		max-width: 100%;
	}
}

.task-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.task-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.task-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 限制为3行 */
	-webkit-box-orient: vertical;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

.reset-button {
	margin-left: 20px; /* 增加左边距 */
	background: rgba(74, 128, 255, 0.1);
	color: #4a80ff;
}

.task-details {
	margin-top: 10px;
	padding: 10px 20px;
}

.el-tag {
	margin: 2px;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.no-data {
	margin-top: 20px;
	text-align: center;
}
</style>